<template>
  <div class="login-box">
    <div class="login_panel">
      <div class="login_panel_form">
        <div class="login_panel_form_title">
          <p class="login_panel_form_title_p">会员注册</p>
        </div>
        <el-form
          ref="loginForm"
          :model="loginFormData"
          :rules="rules"
          :validate-on-rule-change="false"
          @keyup.enter="submitForm"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginFormData.username"
              ref="usernameRef"
              placeholder="请输入用户名"
              @keyup.enter.stop="passwordRef.focus()"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginFormData.password"
              ref="passwordRef"
              type="password"
              placeholder="请输入密码"
              @keyup.enter.stop="password2Ref.focus()"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input
              v-model="loginFormData.password2"
              ref="password2Ref"
              type="password"
              placeholder="请输入确认密码"
              @keyup.enter.stop="captchaRef.focus()"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <div class="captcha-box" >
              <el-input
                v-model="loginFormData.captcha"
                ref="captchaRef"
                placeholder="请输入验证码"
                style="width: 60%"
              />
              <div class="captcha">
                <img
                  style="cursor: pointer"
                  v-if="captchaSrc"
                  :src="captchaSrc"
                  ref="captchaImg"
                  alt="请输入验证码"
                  @click="loginVerify()"
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item class="button-box">
            <el-button
              type="primary"
              size="large"
              style="width: 46%; margin-left: 8%"
              :loading="submitLoading"
              @click="submitForm"
            >提 交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="login_panel_right" />
    </div>
  </div>
</template>

<script setup>
import api from '@/http/api';
import {onMounted, ref} from 'vue';
import {ElMessage} from 'element-plus';
import router from '@/router/index';
import rsa from "@/utils/rsa";

const loginForm = ref(null);
const loginFormData = ref({
  username: '',
  password: '',
  password2: '',
  captcha: ''
});

const rules = ref({
  username: [
    { required: true, message: "请输入用户名", trigger: 'blur' },
    { min: 2, message: "用户名长度至少2个字符", trigger: 'blur' }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: 'blur' },
    { min: 6, message: "密码长度至少6个字符", trigger: 'blur' }
  ],
  password2: [
    { required: true, message: "请输入确认密码", trigger: 'blur' },
    { min: 6, message: "确认密码长度至少6个字符", trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: "请输入验证码", trigger: 'blur' },
    { min: 4, message: "验证码长度至少4个字符", trigger: 'blur' }
  ],
});

const usernameRef = ref();
const passwordRef = ref();
const password2Ref = ref();
const captchaRef = ref();
const submitLoading = ref(false);

const captchaSrc = ref('');

// 获取验证码
const loginVerify = () => {
  api.captcha().then(res => {
    captchaSrc.value = URL.createObjectURL(new Blob([res]));
  });
};
loginVerify();

const submitForm = () => {
  loginForm.value.validate(async(result) => {
    if (loginFormData.value.password !== loginFormData.value.password2) {
      ElMessage.error("密码与确认密码不一致，请重新填写！");
      return;
    }

    if (result) {
      submitLoading.value = true;
      let data = Object.assign({}, loginFormData.value);
      let res = await api.post('/loginSalt');
      data.password = rsa.encrypt(res.data, data.password);
      data.password2 = undefined;
      api.post('/register', data).then(res => {
        if (res.code === '1') {
          ElMessage.success('注册成功，正在跳转登录页面，请稍候...');
          setTimeout(() => {
            router.push('/login').catch(() => {});
          }, 2000);
        } else {
          loginVerify();
          ElMessage.error(res.message);
          submitLoading.value = false;
        }
      }).catch(() => {
        submitLoading.value = false;
        loginVerify();
      });
    } else {
      ElMessage.error('请正确填写注册信息');
      loginVerify()
      return false;
    }
  });
};

onMounted(() => {
  usernameRef.value.focus();
});
</script>

<style lang="scss" scoped>
.login-box {
  margin: 0;
  padding: 0;
  background-image: url("@/assets/images/register.jpg");
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .input-icon {
    padding-right: 6px;
    padding-top: 4px;
  }
  .login_panel {
    padding: 35px 30px;
    background-color: rgba(255, 255, 255, .45);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    .login_panel_form {
      width: 280px;
      background-color: #fff;
      padding: 0 40px 5px 40px;
      border-radius: 10px;
      box-shadow: 2px 3px 7px rgba(0, 0, 0, .2);
      .login_panel_form_title {
        display: flex;
        align-items: center;
        margin: 30px 0;
        .login_panel_form_title_logo {
          width: 90px;
          height: 72px;
        }
        .login_panel_form_title_p {
          font-size: 40px;
          padding-left: 20px;
        }
      }
      .captcha-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }
      .captcha {
        width: 33%;
        height: 38px;
        background: #ccc;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
    .login_panel_foot {
      position: absolute;
      bottom: 20px;
      .links {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .link-icon {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .button-box :deep(.el-form-item__content) {
    margin-top: 5px;
    display: flex;
    flex-direction: row!important;
    justify-content: flex-end;
  }
}
</style>
